<template>
	<s-layout title="管理后台" tabbar="/manage/pages/home/index" :showLeftBtn="false">
		<view class="manage-home">
			<view class="heard">
				<view class="shop-info">
					<view class="">
						<img class="avatar" src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" />
						<text>商城</text>
					</view>
					<view class="">
						<button class="ss-reset-button shop-btn" @tap="toShop">
							<uni-icons type="undo" color="#fff" size="18"></uni-icons> 返回商城
						</button>
					</view>
				</view>
				<view class="statistics">
					<view>
						<text class="num">{{state.statistics.orderNum || 0}}</text>
						<text>支付订单数(笔)</text>
					</view>
					<view>
						<text class="num">{{state.statistics.payAmountNum || 0}}</text>
						<text>支付金额(元)</text>
					</view>
					<view>
						<text class="num">{{state.statistics.addUser || 0}}</text>
						<text>新增会员数(个)</text>
					</view>
					<view>
						<text class="num">{{state.statistics.payUserNum || 0}}</text>
						<text>支付人数(个)）</text>
					</view>
					<view>
						<text class="num">{{state.statistics.showsNums || 0}}</text>
						<text>浏览量(个)</text>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="white-card">
					<view class="title">
						<text>待办事项</text>
						<!-- <view class="more">
							查看更多
							<uni-icons type="right" size="12" color="#999"></uni-icons>
						</view> -->
					</view>
					<view class="todo">
						<view @click="toNext(`/manage/pages/order/index?activeTab=${2}&activeTabValue=${'nosend'}`)">
							<text class="num">{{state.todo.dfhnums || 0}}</text>
							<text>待发货</text>
						</view>
						<view @click="toNext(`/manage/pages/order/index?activeTab=${1}&activeTabValue=${'unpaid'}`)">
							<text class="num">{{state.todo.dfknums || 0}}</text>
							<text>待付款</text>
						</view>
						<view @click="toNext('/manage/pages/order/after')">
							<text class="num">{{state.todo.shnums || 0}}</text>
							<text>售后订单</text>
						</view>
					</view>
				</view>
				<view class="white-card">
					<view class="nav-btn">
						<view @click="toNext('/manage/pages/member/profile')">
							<image class="nav-icon" src="/manage/static/h-member.png" alt="" />
							<text>会员概况</text>
						</view>
						<view @click="toNext('/manage/pages/member/management')">
							<image class="nav-icon" src="/manage/static/h-vip.png" alt="" />
							<text>会员管理</text>
						</view>
						<view @click="toNext('/manage/pages/goods/index')">
							<image class="nav-icon" src="/manage/static/h-goods.png" alt="" />
							<text>商品管理</text>
						</view>
						<view @click="toNext('/manage/pages/order/profile')">
							<image class="nav-icon" src="/manage/static/h-order.png" alt="" />
							<text>订单概况</text>
						</view>
						<view @click="toNext('/manage/pages/order/index')">
							<image class="nav-icon" src="/manage/static/h-order-m.png" alt="" />
							<text>订单管理</text>
						</view>
						<view @click="toNext('/manage/pages/order/after')">
							<image class="nav-icon" src="/manage/static/h-after.png" alt="" />
							<text>售后订单</text>
						</view>
						<view @click="toNext('/manage/pages/statistics/index')">
							<image class="nav-icon" src="/manage/static/h-data.png" alt="" />
							<text>数据统计</text>
						</view>
						<view @click="toNext('/manage/pages/distribution/profile')">
							<image class="nav-icon" src="/manage/static/h-distribution.png" alt="" />
							<text>分销管理</text>
						</view>
						<view @click="toNext('/manage/pages/material/index')">
							<image class="nav-icon" src="/manage/static/h-material.png" alt="" />
							<text>素材管理</text>
						</view>
					</view>
				</view>
				<view class="white-card">
					<view class="title">
						<text>交易概况</text>
						<view class="more-btn">
							支付订单数量
							<uni-icons type="right" size="12" color="#3A43FF"></uni-icons>
						</view>
					</view>
					<line-chart :data="state.data" />
				</view>
				<view class="white-card">
					<view class="title">
						<text>近七天排行榜</text>
					</view>
					<view class="ranking-box">
						<view class="tab-box">
							<view :class="state.rankTab==1?'active-tab':''" @click="changeTab(1)">
								商品排行
							</view>
							<view :class="state.rankTab==2?'active-tab':''" @click="changeTab(2)">
								热搜排行
							</view>
						</view>
						<view class="ranking">
              <uni-table border emptyText="暂无更多数据" v-if="state.rankTab==1">
                <!-- 表头行 -->
                <uni-tr style="min-width: 100%;">
                  <uni-th align="center">排行</uni-th>
                  <uni-th align="center">商品名称</uni-th>
                  <uni-th align="center">销量</uni-th>
                  <uni-th align="center">销售额</uni-th>
                </uni-tr>
                <!-- 表格数据行 -->
                <uni-tr v-for="(item,index) in state.ranking.goods" :key="index">
                  <uni-td align="center">{{index+1}}</uni-td>
                  <uni-td align="center">{{item.title}}</uni-td>
                  <uni-td align="center">{{item.real_sales}}</uni-td>
                  <uni-td align="center">{{item.sale_total_money}}</uni-td>
                </uni-tr>
              </uni-table>
              <uni-table border emptyText="暂无更多数据" v-else>
                <!-- 表头行 -->
                <uni-tr style="min-width: 100%;">
                  <uni-th align="center">排行</uni-th>
                  <uni-th align="center">关键字</uni-th>
                  <uni-th align="center">搜索次数</uni-th>
                </uni-tr>
                <!-- 表格数据行 -->
                <uni-tr v-for="(item,index) in state.ranking.hot_search" :key="index">
                  <uni-td align="center">{{index+1}}</uni-td>
                  <uni-td align="center">{{item.keyword}}</uni-td>
                  <uni-td align="center">{{item.num}}</uni-td>
                </uni-tr>
              </uni-table>
            </view>
					</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import LineChart from '../../component/linechart.vue';
	import {
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import sheep from '@/sheep';

	const state = reactive({
    statistics: {},
    todo: {},
		rankTab: 1,
		data: [3, 8, 10, 16, 10, 12, 15],
    ranking: {}
	})

  async function getStatistics() {
    const res = await sheep.$mapi.home.homeData();
    if (!res.code) return;
    state.statistics = res.data;
  }

  async function getTodo() {
    const res = await sheep.$mapi.home.todoData();
    if (!res.code) return;
    state.todo = res.data.dbsx;
  }

  async function getRanking() {
    const res = await sheep.$mapi.home.rankingData();
    if (!res.code) return;
    state.ranking = res.data;
  }

	function changeTab(value) {
		state.rankTab = value;
	}

	function toNext(path) {
		sheep.$router.go(path);
	}

	function toShop() {
		uni.switchTab({
			url: '/pages/index/index'
		})
		uni.removeStorageSync('isManage')
	}

  onLoad(() => {
    getStatistics();
    getTodo();
    getRanking();
  })
</script>

<style lang="scss" scoped>
  .uni-table{
    min-width: 100% !important;
  }

	.manage-home {
		padding-bottom: var(--status-bar-height);
		background-color: #f6f6f6;
	}

	.shop-btn {
		border: 2rpx solid #fff;
		height: 60rpx;
		padding: 0 10rpx;
		border-radius: 50rpx;
		font-size: 26rpx;
	}

	.heard {
		padding: 28rpx;
		padding-bottom: 100rpx;
		position: relative;
		padding-top: var(--status-bar-height);
		background: linear-gradient(117deg, #70C6FF 0%, #383FFF 100%);

		&::after {
			position: absolute;
			left: 0;
			bottom: 0;
			content: "";
			width: 100%;
			height: 20%;
			background: linear-gradient(to bottom, transparent, #F7F7F7);
			opacity: 0.7;
		}

		.shop-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 40rpx;
			color: #fff;
			font-size: 28rpx;

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 28rpx;
				border: 2rpx solid #FFFFFF;
				margin-right: 30rpx;
			}

			>view {
				display: flex;
				align-items: center;
			}

		}

		.statistics {
			display: flex;
			flex-wrap: wrap;
			font-size: 24rpx;
			color: #c1e3ff;
			margin: 30rpx 0;

			>view {
				width: 33.33%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 25rpx 0;

				.num {
					margin-bottom: 15rpx;
					font-size: 36rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.content {
		position: relative;
		z-index: 99;
		padding: 0 28rpx;
		margin-top: -100rpx;
	}

	.white-card {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 28rpx;
		margin-bottom: 24rpx;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
		}
	}

	.more {
		font-size: 24rpx;
		color: #999999;
		font-weight: 400;
	}

	.todo {
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;

		>view {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 26rpx;
			color: #353535;

			.num {
				font-weight: 800;
				font-size: 48rpx;
				color: #333333;
				margin-bottom: 20rpx;
			}
		}
	}

	.nav-btn {
		display: flex;
		flex-wrap: wrap;

		>view {
			width: 25%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color: #353535;
			margin: 20rpx 0;

			.nav-icon {
				width: 72rpx;
				height: 72rpx;
				margin-bottom: 15rpx;
			}
		}
	}

	.more-btn {
		padding: 8rpx 12rpx;
		background: rgba(58, 67, 255, 0.1);
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		font-size: 24rpx;
		color: #3A43FF;
		font-weight: 400;
	}

	.chart-box {
		margin-top: 30rpx;
	}

	.ranking-box {
		margin-top: 30rpx;

		.tab-box {
			width: 388rpx;
			height: 66rpx;
			background: #F7F7F7;
			border-radius: 98rpx 98rpx 98rpx 98rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-around;

			>view {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-around;
				height: 100%;
				font-size: 26rpx;
				color: #333333;
			}

			.active-tab {
				background: #3A43FF;
				border-radius: 98rpx 98rpx 98rpx 98rpx;
				color: #fff;
			}
		}

		.ranking {
			margin-top: 25rpx;

			>view {
				display: flex;
				align-items: center;

				>text {
					flex: 1;
          text-align: center;

					&:nth-child(2) {
						flex: 3;
            text-align: left;
					}
				}
			}

			.table-th {
				font-size: 26rpx;
				color: #666666;
			}

			.table-td {
				margin-top: 15rpx;
				font-size: 26rpx;
				color: #333333;
			}
		}
	}
</style>
